<template>
  <div style="padding-bottom:20px">
    <div class="nav">
      <a href="javascript:;" class="back" @click="goBack">
        <i class="el-icon-arrow-left"></i> 返回
      </a>
      <span class="target" v-for="(item, index) in navList">
        {{ item }}
        <i class="el-icon-arrow-right" v-if="index < navList.length - 1"></i>
      </span>
    </div>
    <div class="content clear">
      <div class="player">
        <div v-if="selVideo.contentPath" style="height:100%;width:100%">
          <mVideo
            :src="selVideo.contentPath"
            :poster="selVideo.coverPath"
            ref="mVideo"
          ></mVideo>
        </div>
      </div>
      <div class="list">
        <div class="title">
          <h2 class="firstT">{{ selVideo.subCourseName }}</h2>
          <h6 class="subTitle">主讲人：{{ selVideo.lecturerName }}老师</h6>
        </div>
        <div class="tab">
          <span :class="{ on: nav == 1 }" @click="changeTab(1)">课程目录</span>
<!--          <span :class="{ on: nav == 2 }" @click="changeTab(2)">课堂互动</span>-->
        </div>
        <div class="course" v-show="nav == 1">
          <ul>
            <li
              class="text-overflow"
              :class="{ active: videoId == item.subCourseId }"
              v-for="item in videoList"
              @click="changeViedo(item)"
            >
              {{ item.subCourseName }}
            </li>
          </ul>
        </div>
        <div class="test" v-show="nav == 2">
          <!-- <div class="defClasss">
            选择班级：
            <el-select
              style="width:150px"
              v-model="classId"
              filterable
              remote
              reserve-keyword
              placeholder="请选择班级"
              :remote-method="remoteMethod"
              :loading="loading"
              size="mini"
              @change="selectChange"
            >
              <el-option
                v-for="item in classList"
                :key="item.id"
                :label="item.className"
                :value="item.id"
              ></el-option>
            </el-select>
          </div> -->
          <div class="questions">
            <p>选择题目</p>
            <span
              class="qType"
              v-for="(item, index) in getQuestionType"
              @click="setQues(index)"
              >{{ item }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="mask"></div>
    <div class="questionBox" v-if="questionShow">
      <div class="header">
        <p class="topRight">
          <span
            style="float:left;height:30px;line-height:30px;margin-top:10px;margin-left:50px;background:#DEE6EC;width:120px;text-align:center"
            >【{{ getQuestionType[selQues.questionType] }}】</span
          >
          <a href="javascipt:;">
            <i
              class="el-icon-close"
              @click="
                questionShow = false;
                studentShow = false;
              "
            ></i>
          </a>
        </p>
        <!-- <a href="javascript:;" class="studentChose" @click="selStudent"
          >选择学生</a
        > -->
      </div>
      <div class="content">
        <div class="box" style="min-height:148px">
          <div v-html="selQues.title.replace(/<br\/?>/, '')" class="noBr"></div>
          <div class="answer">
            <div
              v-for="item in selQues.items"
              v-html="item.prefix + '.' + item.content.replace(/<br\/?>/, '')"
              class="noBr"
            ></div>
          </div>
        </div>
        <div style="display:flex;margin-top:20px">
          <div style="flex:1;margin-right:25px;border:1px solid #ccc;">
            <span
              style="color:#007CDC;cursor:pointer;user-select:none;float:right;line-height:36px;padding-right:10px;font-size:20px"
              @click="getBarData"
            >
              <i
                class="iconfont icon-shuaxin"
                style="padding-right:10px;font-size:20px"
              ></i
              >刷新
            </span>
            <h4
              style="line-height:36px;background:#DEE6EC;padding-left:10px;font-size:20px;font-weight:400"
            >
              答题情况
            </h4>
            <div style="height:180px;width:326px" ref="barChart"></div>
          </div>
          <div class="showAnswer" style="flex:1;border:1px solid #ccc">
            <div style="line-height:36px;background:#DEE6EC;padding:0 5px">
              <a
                href="javascript:;"
                class="show"
                @click="showAnswer = !showAnswer"
                >显示答案</a
              >
            </div>

            <div class="rightAns" v-show="showAnswer" style=";padding:0 5px">
              <p>
                正确答案：
                <span>{{ selQues.correct }}</span>
              </p>
              <div>
                答案解析：
                <a v-html="selQues.analyze"></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <a href="javascript:;" class="btn" @click="nextQue">下一题</a>
        <a href="javascript:;" class="btn" @click="prevQue">上一题</a>
      </div>
    </div>
    <div class="studentBox" v-if="studentShow">
      <div class="header">
        <a href="javascript:;" class="refresh" @click="randomStu">
          <i class="el-icon-refresh"></i> 重新选择
        </a>
        <a href="javascript:;" class="close">
          <i class="el-icon-close" @click="studentShow = false"></i>
        </a>
      </div>
      <p class="box">
        <span>{{ selClass.className }} {{ student.stuName }}</span>
      </p>
    </div>
  </div>
</template>
<script>
import { classList, studentSignList, getRandomStu } from "@/api/student";
import { getCourseById } from "@/api/course";
import { allCategory, queSituationSysList } from "@/api/system";
import { examCourseDirectory, examPager, examDetail } from "@/api/exam";
import { voteChoiseo } from "@/api/votesdk";
import { mapMutations, mapGetters } from "vuex";
export default {
  name: "TrainPlay",
  data() {
    return {
      nav: 1,
      questionShow: false,
      showAnswer: false,
      studentShow: false,
      courseId: "",
      navList: ["全部"],
      typeList: {},
      detailData: {},
      videoId: "",
      videoList: [],
      selVideo: {},
      loading: false,
      studentList: [],
      classList: [],
      classId: "",
      selClass: {},
      testList: [],
      onlineList: [],
      quesObj: {
        1: [],
        2: [],
        3: [],
        4: [],
        5: []
      },
      selQues: {},
      selQuesType: "",
      student: {},
      barChart: null
    };
  },
  computed: {
    ...mapGetters(["getCourseData", "getQuestionType"])
  },
  methods: {
    goBack() {
      this.$router.goBack();
    },
    remoteMethod(query) {
      this.loading = true;
      classList({ className: query, pageIndex: 1, pageSize: 20 })
        .then(res => {
          this.loading = false;
          if (res.code == 1) {
            this.classList = res.response.list;
          }
        })
        .catch(res => {
          this.loading = false;
        });
    },
    //切换班级
    selectChange(id) {
      this.classList.map(classes => {
        if (classes.id == id) {
          this.selClass = classes;
        }
      });
      studentSignList({
        classId: this.classId,
        pageIndex: 1,
        pageSize: 200
      }).then(res => {
        if (res.code == 1) {
          this.studentList = res.response.list;
        }
      });
    },
    //选择学生
    selStudent() {
      this.randomStu();
      this.studentShow = true;
    },
    //随机学生
    randomStu() {
      getRandomStu({ classId: this.classId }).then(res => {
        if (res.code == 1) {
          this.student = res.response;
        }
      });
    },
    //切换视频
    changeViedo(item) {
      this.selVideo = item;
      this.videoId = item.subCourseId;
      this.examPager();
      this.$router.replace(
        "/train/play/" + item.subCourseId + "?courseId=" + this.courseId
      );
    },
    changeTab(index) {
      this.nav = index;
    },
    async getModules() {
      await allCategory({ categoryId: 1 }).then(res => {
        if (res.code == 1) {
          res.response.map(item => {
            this.typeList[item.id] = item.concreteName;
          });
        }
      });
      await allCategory({ categoryId: 0 }).then(res => {
        if (res.code == 1) {
          res.response.map(item => {
            this.typeList[item.id] = item.concreteName;
          });
        }
      });
    },
    async initData() {
      await this.getModules();
      if (this.getCourseData && this.getCourseData.id) {
        this.detailData = this.getCourseData;
        this.navList.push(this.typeList[this.getCourseData.courseProject]);
        this.navList.push(this.getCourseData.courseName);
        this.navList.push(this.typeList[this.getCourseData.courseType]);
      } else {
        getCourseById(this.courseId).then(res => {
          if (res.code == 1) {
            this.detailData = res.response;
            this.navList.push(this.typeList[this.detailData.courseProject]);
            this.navList.push(this.detailData.courseName);
            this.navList.push(this.typeList[this.detailData.courseType]);
          }
        });
      }
    },
    examPager() {
      //视频试卷对应
      examPager(this.videoId).then(res => {
        if (res.code == 1) {
          this.testList = res.response;
          this.testList.map(item => {
            if (item.paperType == 0) {
              //课堂互动
              this.onlineList = item;
              this.quesObj = { 1: [], 2: [], 3: [], 4: [], 5: [] };
              item.questionItems.map(ques => {
                this.quesObj[ques.questionType].push(ques);
              });
            }
          });
        }
      });
    },
    //选择题目类型
    setQues(index) {
      this.playPause();
      // if (!this.classId) {
      //   this.$message({
      //     showClose: true,
      //     message: "请先选择班级"
      //   });
      //   return;
      // }
      // if (!this.studentList.length) {
      //   this.$message({
      //     showClose: true,
      //     message: "此班级暂无学生，请选择其他班级"
      //   });
      //   return;
      // }
      this.showAnswer = false;
      this.selQuesType = index;
      this.selQues = this.quesObj[index].length && this.quesObj[index][0];
      if (!this.selQues) {
        this.$message({
          showClose: true,
          message: "暂无此类型题目",
          type: "warning"
        });
      } else {
        this.voteChoiseo();
        this.barChart = null;
        this.questionShow = true;
        this.refreshBar();
      }
    },
    //暂停
    playPause() {
      this.$refs.mVideo.pause("btn");
    },
    nextQue() {
      if (this.selQues.itemOrder == this.onlineList.questionItems.length) {
        this.$message({
          showClose: true,
          message: "此题已最后第一题"
        });
      } else {
        this.showAnswer = false;
        this.selQues = this.onlineList.questionItems[this.selQues.itemOrder];
        this.voteChoiseo();
      }
    },
    prevQue() {
      if (this.selQues.itemOrder == 1) {
        this.$message({
          showClose: true,
          message: "此题已第一题"
        });
      } else {
        this.showAnswer = false;
        this.selQues = this.onlineList.questionItems[
          this.selQues.itemOrder - 2
        ];
        this.voteChoiseo();
      }
    },
    //调用签到接口
    voteChoiseo() {
      let examId = "";
      this.testList.map(item => {
        let isIn = false;
        item.questionItems.map(que => {
          if (que.id == this.selQues.id) {
            isIn = true;
          }
        });
        if (isIn) {
          examId = item.id;
        }
      });
      voteChoiseo({
        // basementId: this.activeQue.id,
        courseId: this.courseId,
        classId: examId,
        examId: examId,
        examType: 0,
        questionEditRequestVM: {
          id: this.selQues.id
        }
      });
      // this.getBarData();
    },
    //刷新柱状图
    getBarData() {
      let examId = "";
      let examPaperType = "";
      this.testList.map(item => {
        let isIn = false;
        item.questionItems.map(que => {
          if (que.id == this.selQues.id) {
            isIn = true;
          }
        });
        if (isIn) {
          examPaperType = item.paperType;
          examId = item.id;
        }
      });
      queSituationSysList({
        classId: examId,
        courseId: this.courseId,
        examPaperType: 0,
        questionId: this.selQues.id
      }).then(res => {
        if (res.code == 1) {
          let arr = [];
          let data = [];
          res.response.map(item => {
            arr.push(item.answer);
            data.push(item.answerCount);
          });
          this.refreshBar(arr, data);
        } else if (res.code == 2) {
          // this.$message.warning({
          //   message: res.message
          // });
        }
      });
    },
    refreshBar(xAxis, data) {
      let xAxiss = xAxis || ["A", "B", "C", "D"];
      let datas = data || [0, 0, 0, 0];
      let option = {
        // title: {
        //   text: "答题情况",
        //   left: "center",
        //   textStyle: {
        //     fontSize: 14
        //   }
        // },
        color: ["#2ec7c9", "#b6a2de"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "40px",
          containLabel: true
        },
        yAxis: {
          type: "value",
          name: "人数",
          minInterval: 1
        },
        xAxis: {
          type: "category",
          data: xAxiss
        },
        series: [
          {
            name: "答提人数",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight"
            },
            data: datas
          }
        ]
      };
      this.$nextTick(function() {
        if (!this.barChart) {
          this.barChart = this.$echarts.init(this.$refs.barChart);
        }
        this.barChart.setOption(option);
      });
    }
  },
  created() {
    this.videoId = this.$route.params.id;
    this.courseId = this.$route.query.courseId;
    this.initData();
    //视频列表
    examCourseDirectory(this.courseId)
      .then(res => {
        if (res.code == 1) {
          this.videoList = res.response;
          this.videoList.map(item => {
            if (item.subCourseId == this.videoId) {
              this.selVideo = item;
            }
          });
        }
      })
      .catch(res => {});
    this.examPager();
    this.remoteMethod();
  }
};
</script>
<style lang="scss" scoped>
.nav {
  box-sizing: content-box;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  font-weight: 400;
  .back {
    display: inline-block;
    width: 100px;
    background-color: #fff;
    text-align: center;
    margin-right: 20px;
  }
}
.content {
  .player {
    background-color: #fff;
    float: left;
    width: 900px;
    height: 480px;
  }
  .list {
    margin-left: 910px;
    height: 480px;
    .title {
      background-color: #fff;
      height: 70px;
      padding-left: 10px;
      .firstT {
        font-weight: 400;
        font-size: 20px;
        line-height: 40px;
      }
      .subTitle {
        font-weight: 400;
        font-size: 14px;
      }
    }
    .tab {
      height: 40px;
      line-height: 40px;
      font-size: 0;
      span {
        display: inline-block;
        width: 100%;
        font-weight: 400;
        font-size: 16px;
        text-align: center;
        cursor: pointer;
      }
      .on {
        color: rgba(255, 255, 255, 1);
        background-color: rgb(4, 126, 221);
      }
    }
    .course {
      margin: 0;
      height: calc(100% - 110px);
      background-color: #fff;
      overflow-x: hidden;
      ul {
        padding: 10px;
      }
      li {
        cursor: pointer;
        padding-left: 30px;
        font-weight: 400;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        position: relative;
        &:after {
          content: "";
          position: absolute;
          height: 15px;
          width: 15px;
          border: 1px solid #999;
          background-color: #fff;
          border-radius: 50%;
          left: 5px;
          top: 12px;
        }
        &:before {
          content: "";
          position: absolute;
          height: 100%;
          width: 1px;
          background-color: #ccc;
          left: 12px;
        }
      }
      .active {
        color: rgba(4, 126, 221, 1);
        &:after {
          background-color: rgba(4, 126, 221, 1);
          border-color: rgba(4, 126, 221, 1);
        }
      }
    }
    .test {
      margin: 0;
      height: calc(100% - 110px);
      background-color: #fff;
      overflow-x: hidden;
      padding: 20px;
      .defClasss {
        font-size: 14px;
        span {
          color: #047edd;
          font-size: 16px;
        }
      }
      .questions {
        margin-top: 10px;
        font-size: 14px;
        text-align: center;
        p {
          text-align: left;
          line-height: 40px;
        }
        .qType {
          display: inline-block;
          vertical-align: top;
          height: 28px;
          line-height: 28px;
          text-align: center;
          width: 56px;
          font-size: 14px;
          background: #f9f9f9;
          border-radius: 10px;
          margin-right: 10px;
          margin-bottom: 10px;
          cursor: pointer;
        }
      }
    }
  }
}
// 问题弹窗
.questionBox {
  background-color: #fff;
  position: fixed;
  width: 860px;
  height: 530px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #bbbbbb;
  .header {
    height: 40px;
    line-height: 40px;
    .topRight {
      height: 40px;
      font-size: 22px;
      font-weight: 400;
      text-align: right;
      padding-right: 20px;
    }
    .studentChose {
      display: inline-block;
      margin-left: 50px;
      font-size: 20px;
      color: #047edd;
    }
  }
  .content {
    padding: 0 50px;
    margin-bottom: 100px;
    height: calc(100% - 120px);
    box-sizing: content-box;
    overflow-y: auto;
    .box {
      font-size: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      .answer {
        margin-top: 20px;
        font-size: 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        div {
          width: 50%;
          cursor: pointer;
        }
      }
    }
    .showAnswer {
      // margin-top: 20px;
      .show {
        font-size: 20px;
        color: #101010;
      }
      .rightAns {
        margin-top: 10px;
        font-size: 20px;
        line-height: 30px;
      }
    }
  }
  .footer {
    position: absolute;
    bottom: 20px;
    height: 40px;
    right: 40px;
    .btn {
      float: right;
      width: 85px;
      height: 40px;
      line-height: 40px;
      margin-right: 20px;
      background: #f9f9f9;
      text-align: center;
    }
  }
}
.studentBox {
  background-color: #f5f8fb;
  position: fixed;
  width: 420px;
  height: 230px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  .header {
    height: 40px;
    line-height: 40px;
    color: #6c7277;
    .refresh {
      font-size: 14px;
      line-height: 40px;
      padding-left: 10px;
      i {
        vertical-align: middle;
        font-size: 22px;
      }
    }
    .close {
      float: right;
      margin-right: 10px;
      font-size: 22px;
    }
  }
  .box {
    height: calc(100% - 40px);
    width: 100%;
    display: table;
    font-size: 30px;
    font-weight: 400;
    span {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      width: 100%;
    }
  }
}
</style>
